<template>
  <div>
    <commonForm ref="mybaseForm"  @upfile="getFile" @submit="getForm" :formData="videoForm" ></commonForm>

     <div class="video_search">
        <div class="search_info">
           <el-input v-model="queryForm.searchText"></el-input>
           <el-button type="primary" @click="getList">搜索</el-button>
        </div>
        <div>
          <el-button type="success" @click="toOpen">添加</el-button>
        </div>
     </div>
     <div>
       <tableCom   :show-header="true"  titleText="视频列表" :columns="columns" :tableData="videoList" @sendPage="getList">
          <template #title>
              <Menu />
          </template>
          <template #action="{row}">
              <el-link type="primary" @click="toEdit(row)">编辑</el-link>
               <el-link type="danger" @click="toDel(row.ID)">删除</el-link>
          </template>
       </tableCom>
     </div>
  </div>
</template>
<script setup lang="ts">
import tableCom from '@/components/table/index.vue'
import {Menu} from '@element-plus/icons-vue'
import {getVideoListApi,deleteVideoApi} from '@/api/video'
import {ref,reactive} from 'vue'
import commonForm from '@/components/form/index.vue'
import videoForm from './videoForm'
import {uploadVideoApi,addVideoApi,editVideoApi} from '@/api/video'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'

let queryForm=reactive({
  searchText:"",    
  pageStart:1
})
let columns=[
  {
    label:"视频名称",
    dataIndex:"Vname"
  },
    {
    label:"绑定课程",
    dataIndex:"Vstate"
  },
    {
    label:"视频时长",
      dataIndex:"Vtime",
      isTime:true //时间的渲染
   },
    {
    label:"发布日期",
     dataIndex:"createAt",
     isDate:true //日期的渲染
  },
  {
     label:"操作",
     dataIndex:"action",
  }
]

let videoList=ref([])

let getList=async (page=1)=>{ //
  queryForm.pageStart=page
  let res=await getVideoListApi(queryForm)
  videoList.value=res.data;
}
getList();

// 删除方法
let toDel=async (ID:number)=>{
  console.log(ID)
  let res=await deleteVideoApi(ID)
  getList();
}


let addVideoForm=reactive({
   Vurl:"",
})
let toOpen=()=>{
    mybaseForm.value?.open()
}

// 触发了子传父  获取了表单收集的数据
let getForm=async (addForm:any)=>{
  console.log(addForm,"---------收集的数据-------")

      addForm.Vurl=addVideoForm.Vurl;
      if(addForm.ID){
        // 编辑接口
        let editRes=await editVideoApi(addForm)
        ElMessage.success("编辑成功")
      }else{
       // 添加接口
       let res=await addVideoApi(addForm)
         ElMessage.success("添加成功")
      }
   
    
      mybaseForm.value?.close()
        getList();
}

// 上传视频
let getFile=async (formdata:any)=>{
  console.log(formdata,"8888888dsf")
  let res=await uploadVideoApi(formdata)
  addVideoForm.Vurl=res.cacheName;
  console.log(res,"888888888视频上传成功")
   mybaseForm.value?.setFormVal({
    Vurl:res.cacheName
   })
}

// 去编辑
let mybaseForm=ref<FormInstance|null>()
let toEdit=(row:any)=>{
  console.log(row,"111")
  mybaseForm.value?.setFormVal(row)
  
}
</script>
<style lang="scss" scoped>
  .video_search{
    display: flex;
    width: 900px;
    height: 100px;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    .search_info{
         display: flex;
    }
}
</style>